<!-- 新增 DateDivider.vue 日期分隔组件 -->
<template>
	<div class="date-divider">
		<div class="line"></div>
		<span class="date-text">{{ formattedDate }}</span>
		<div class="line"></div>
	</div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
	timestamp: {
		type: [Number, Date],
		required: true
	}
})

const formattedDate = computed(() => {
	const date = new Date(props.timestamp)
	return date.toLocaleDateString('zh-CN', {
		year: 'numeric',
		month: 'long',
		day: 'numeric'
	})
})
</script>

<style scoped>
.date-divider {
	display: flex;
	align-items: center;
	margin: 20px 0;
	padding: 0 10px;
}

.line {
	flex: 1;
	height: 1px;
	background-color: #e0e0e0;
}

.date-text {
	padding: 0 12px;
	color: #666;
	font-size: 12px;
	white-space: nowrap;
}
</style>
